
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <script src="iconfont.js"></script>

    <style type="text/css">
        .icon {
          /* 通过设置 font-size 来改变图标大小 */
          width: 1em; height: 1em;
          /* 图标和文字相邻时，垂直对齐 */
          vertical-align: -0.15em;
          /* 通过设置 color 来改变 SVG 的颜色/fill */
          fill: currentColor;
          /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
             normalize.css 中也包含这行 */
          overflow: hidden;
        }

    </style>
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-clipboardcheck"></use>
                    </svg>
                    <div class="name">clipboard-check</div>
                    <div class="fontclass">#icon-clipboardcheck</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-clipboardtext"></use>
                    </svg>
                    <div class="name">clipboard-text</div>
                    <div class="fontclass">#icon-clipboardtext</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-closebox"></use>
                    </svg>
                    <div class="name">close-box</div>
                    <div class="fontclass">#icon-closebox</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-closeboxoutline"></use>
                    </svg>
                    <div class="name">close-box-outline</div>
                    <div class="fontclass">#icon-closeboxoutline</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-commentquestionoutline"></use>
                    </svg>
                    <div class="name">comment-question-outline</div>
                    <div class="fontclass">#icon-commentquestionoutline</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-label"></use>
                    </svg>
                    <div class="name">label</div>
                    <div class="fontclass">#icon-label</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-labeloutline"></use>
                    </svg>
                    <div class="name">label-outline</div>
                    <div class="fontclass">#icon-labeloutline</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-more"></use>
                    </svg>
                    <div class="name">more</div>
                    <div class="fontclass">#icon-more</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-pollbox"></use>
                    </svg>
                    <div class="name">poll-box</div>
                    <div class="fontclass">#icon-pollbox</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-puzzle"></use>
                    </svg>
                    <div class="name">puzzle</div>
                    <div class="fontclass">#icon-puzzle</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-record"></use>
                    </svg>
                    <div class="name">record</div>
                    <div class="fontclass">#icon-record</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-reload"></use>
                    </svg>
                    <div class="name">reload</div>
                    <div class="fontclass">#icon-reload</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-security"></use>
                    </svg>
                    <div class="name">security</div>
                    <div class="fontclass">#icon-security</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-thumbdown"></use>
                    </svg>
                    <div class="name">thumb-down</div>
                    <div class="fontclass">#icon-thumbdown</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-thumbdownoutline"></use>
                    </svg>
                    <div class="name">thumb-down-outline</div>
                    <div class="fontclass">#icon-thumbdownoutline</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-account-card-details"></use>
                    </svg>
                    <div class="name">account-card-details</div>
                    <div class="fontclass">#icon-account-card-details</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-account"></use>
                    </svg>
                    <div class="name">account</div>
                    <div class="fontclass">#icon-account</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-account-check"></use>
                    </svg>
                    <div class="name">account-check</div>
                    <div class="fontclass">#icon-account-check</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-account-key"></use>
                    </svg>
                    <div class="name">account-key</div>
                    <div class="fontclass">#icon-account-key</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-account-star"></use>
                    </svg>
                    <div class="name">account-star</div>
                    <div class="fontclass">#icon-account-star</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-account-search"></use>
                    </svg>
                    <div class="name">account-search</div>
                    <div class="fontclass">#icon-account-search</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-alarm"></use>
                    </svg>
                    <div class="name">alarm</div>
                    <div class="fontclass">#icon-alarm</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-alert-circle-outline"></use>
                    </svg>
                    <div class="name">alert-circle-outline</div>
                    <div class="fontclass">#icon-alert-circle-outline</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-android-debug-bridge"></use>
                    </svg>
                    <div class="name">android-debug-bridge</div>
                    <div class="fontclass">#icon-android-debug-bridge</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-apple-ios"></use>
                    </svg>
                    <div class="name">apple-ios</div>
                    <div class="fontclass">#icon-apple-ios</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-apple-finder"></use>
                    </svg>
                    <div class="name">apple-finder</div>
                    <div class="fontclass">#icon-apple-finder</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-apps"></use>
                    </svg>
                    <div class="name">apps</div>
                    <div class="fontclass">#icon-apps</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arrow-bottom-right"></use>
                    </svg>
                    <div class="name">arrow-bottom-right</div>
                    <div class="fontclass">#icon-arrow-bottom-right</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arrow-bottom-left"></use>
                    </svg>
                    <div class="name">arrow-bottom-left</div>
                    <div class="fontclass">#icon-arrow-bottom-left</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arrow-compress"></use>
                    </svg>
                    <div class="name">arrow-compress</div>
                    <div class="fontclass">#icon-arrow-compress</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arrow-down"></use>
                    </svg>
                    <div class="name">arrow-down</div>
                    <div class="fontclass">#icon-arrow-down</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arrow-expand"></use>
                    </svg>
                    <div class="name">arrow-expand</div>
                    <div class="fontclass">#icon-arrow-expand</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arrow-left"></use>
                    </svg>
                    <div class="name">arrow-left</div>
                    <div class="fontclass">#icon-arrow-left</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arrow-right"></use>
                    </svg>
                    <div class="name">arrow-right</div>
                    <div class="fontclass">#icon-arrow-right</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arrow-top-right"></use>
                    </svg>
                    <div class="name">arrow-top-right</div>
                    <div class="fontclass">#icon-arrow-top-right</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arrow-up"></use>
                    </svg>
                    <div class="name">arrow-up</div>
                    <div class="fontclass">#icon-arrow-up</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arrow-top-left"></use>
                    </svg>
                    <div class="name">arrow-top-left</div>
                    <div class="fontclass">#icon-arrow-top-left</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-attachment"></use>
                    </svg>
                    <div class="name">attachment</div>
                    <div class="fontclass">#icon-attachment</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-av-timer"></use>
                    </svg>
                    <div class="name">av-timer</div>
                    <div class="fontclass">#icon-av-timer</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-block-helper"></use>
                    </svg>
                    <div class="name">block-helper</div>
                    <div class="fontclass">#icon-block-helper</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-border-color"></use>
                    </svg>
                    <div class="name">border-color</div>
                    <div class="fontclass">#icon-border-color</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-buffer"></use>
                    </svg>
                    <div class="name">buffer</div>
                    <div class="fontclass">#icon-buffer</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-check"></use>
                    </svg>
                    <div class="name">check</div>
                    <div class="fontclass">#icon-check</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chevron-double-down"></use>
                    </svg>
                    <div class="name">chevron-double-down</div>
                    <div class="fontclass">#icon-chevron-double-down</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chevron-double-left"></use>
                    </svg>
                    <div class="name">chevron-double-left</div>
                    <div class="fontclass">#icon-chevron-double-left</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chevron-double-right"></use>
                    </svg>
                    <div class="name">chevron-double-right</div>
                    <div class="fontclass">#icon-chevron-double-right</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chevron-double-up"></use>
                    </svg>
                    <div class="name">chevron-double-up</div>
                    <div class="fontclass">#icon-chevron-double-up</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chevron-down"></use>
                    </svg>
                    <div class="name">chevron-down</div>
                    <div class="fontclass">#icon-chevron-down</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chevron-left"></use>
                    </svg>
                    <div class="name">chevron-left</div>
                    <div class="fontclass">#icon-chevron-left</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chevron-right"></use>
                    </svg>
                    <div class="name">chevron-right</div>
                    <div class="fontclass">#icon-chevron-right</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chevron-up"></use>
                    </svg>
                    <div class="name">chevron-up</div>
                    <div class="fontclass">#icon-chevron-up</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-close"></use>
                    </svg>
                    <div class="name">close</div>
                    <div class="fontclass">#icon-close</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-cloud-upload"></use>
                    </svg>
                    <div class="name">cloud-upload</div>
                    <div class="fontclass">#icon-cloud-upload</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-comment-processing-outline"></use>
                    </svg>
                    <div class="name">comment-processing-outline</div>
                    <div class="fontclass">#icon-comment-processing-outline</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-comment-question-outline"></use>
                    </svg>
                    <div class="name">comment-question-outline</div>
                    <div class="fontclass">#icon-comment-question-outline</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-comment-text-outline"></use>
                    </svg>
                    <div class="name">comment-text-outline</div>
                    <div class="fontclass">#icon-comment-text-outline</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-comment-text"></use>
                    </svg>
                    <div class="name">comment-text</div>
                    <div class="fontclass">#icon-comment-text</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-database"></use>
                    </svg>
                    <div class="name">database</div>
                    <div class="fontclass">#icon-database</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-earth"></use>
                    </svg>
                    <div class="name">earth</div>
                    <div class="fontclass">#icon-earth</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-elevation-rise"></use>
                    </svg>
                    <div class="name">elevation-rise</div>
                    <div class="fontclass">#icon-elevation-rise</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-email-outline"></use>
                    </svg>
                    <div class="name">email-outline</div>
                    <div class="fontclass">#icon-email-outline</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-emoticon-happy"></use>
                    </svg>
                    <div class="name">emoticon-happy</div>
                    <div class="fontclass">#icon-emoticon-happy</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-eye"></use>
                    </svg>
                    <div class="name">eye</div>
                    <div class="fontclass">#icon-eye</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-facebook"></use>
                    </svg>
                    <div class="name">facebook</div>
                    <div class="fontclass">#icon-facebook</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-file-document"></use>
                    </svg>
                    <div class="name">file-document</div>
                    <div class="fontclass">#icon-file-document</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-file-find"></use>
                    </svg>
                    <div class="name">file-find</div>
                    <div class="fontclass">#icon-file-find</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-file-pdf"></use>
                    </svg>
                    <div class="name">file-pdf</div>
                    <div class="fontclass">#icon-file-pdf</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-format-vertical-align-bottom"></use>
                    </svg>
                    <div class="name">format-vertical-align-bottom</div>
                    <div class="fontclass">#icon-format-vertical-align-bottom</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-format-vertical-align-top"></use>
                    </svg>
                    <div class="name">format-vertical-align-top</div>
                    <div class="fontclass">#icon-format-vertical-align-top</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-github-circle"></use>
                    </svg>
                    <div class="name">github-circle</div>
                    <div class="fontclass">#icon-github-circle</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-google-plus"></use>
                    </svg>
                    <div class="name">google-plus</div>
                    <div class="fontclass">#icon-google-plus</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-heart"></use>
                    </svg>
                    <div class="name">heart</div>
                    <div class="fontclass">#icon-heart</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-heart-outline"></use>
                    </svg>
                    <div class="name">heart-outline</div>
                    <div class="fontclass">#icon-heart-outline</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-home-variant"></use>
                    </svg>
                    <div class="name">home-variant</div>
                    <div class="fontclass">#icon-home-variant</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-image"></use>
                    </svg>
                    <div class="name">image</div>
                    <div class="fontclass">#icon-image</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-image-multiple"></use>
                    </svg>
                    <div class="name">image-multiple</div>
                    <div class="fontclass">#icon-image-multiple</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-key"></use>
                    </svg>
                    <div class="name">key</div>
                    <div class="fontclass">#icon-key</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-layers"></use>
                    </svg>
                    <div class="name">layers</div>
                    <div class="fontclass">#icon-layers</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-library-books"></use>
                    </svg>
                    <div class="name">library-books</div>
                    <div class="fontclass">#icon-library-books</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-lightbulb-on-outline"></use>
                    </svg>
                    <div class="name">lightbulb-on-outline</div>
                    <div class="fontclass">#icon-lightbulb-on-outline</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-login-variant"></use>
                    </svg>
                    <div class="name">login-variant</div>
                    <div class="fontclass">#icon-login-variant</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-logout-variant"></use>
                    </svg>
                    <div class="name">logout-variant</div>
                    <div class="fontclass">#icon-logout-variant</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-loop"></use>
                    </svg>
                    <div class="name">loop</div>
                    <div class="fontclass">#icon-loop</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-magnify"></use>
                    </svg>
                    <div class="name">magnify</div>
                    <div class="fontclass">#icon-magnify</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-map-marker"></use>
                    </svg>
                    <div class="name">map-marker</div>
                    <div class="fontclass">#icon-map-marker</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-menu"></use>
                    </svg>
                    <div class="name">menu</div>
                    <div class="fontclass">#icon-menu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-message-text-outline"></use>
                    </svg>
                    <div class="name">message-text-outline</div>
                    <div class="fontclass">#icon-message-text-outline</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-navigation"></use>
                    </svg>
                    <div class="name">navigation</div>
                    <div class="fontclass">#icon-navigation</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-near-me"></use>
                    </svg>
                    <div class="name">near-me</div>
                    <div class="fontclass">#icon-near-me</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-open-in-new"></use>
                    </svg>
                    <div class="name">open-in-new</div>
                    <div class="fontclass">#icon-open-in-new</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-paperclip"></use>
                    </svg>
                    <div class="name">paperclip</div>
                    <div class="fontclass">#icon-paperclip</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-playlist-check"></use>
                    </svg>
                    <div class="name">playlist-check</div>
                    <div class="fontclass">#icon-playlist-check</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-playlist-remove"></use>
                    </svg>
                    <div class="name">playlist-remove</div>
                    <div class="fontclass">#icon-playlist-remove</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-plus"></use>
                    </svg>
                    <div class="name">plus</div>
                    <div class="fontclass">#icon-plus</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-plus-one"></use>
                    </svg>
                    <div class="name">plus-one</div>
                    <div class="fontclass">#icon-plus-one</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qrcode"></use>
                    </svg>
                    <div class="name">qrcode</div>
                    <div class="fontclass">#icon-qrcode</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qrcode-scan"></use>
                    </svg>
                    <div class="name">qrcode-scan</div>
                    <div class="fontclass">#icon-qrcode-scan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qqchat"></use>
                    </svg>
                    <div class="name">qqchat</div>
                    <div class="fontclass">#icon-qqchat</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-radiobox-marked"></use>
                    </svg>
                    <div class="name">radiobox-marked</div>
                    <div class="fontclass">#icon-radiobox-marked</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-radiobox-blank"></use>
                    </svg>
                    <div class="name">radiobox-blank</div>
                    <div class="fontclass">#icon-radiobox-blank</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-reddit"></use>
                    </svg>
                    <div class="name">reddit</div>
                    <div class="fontclass">#icon-reddit</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-send"></use>
                    </svg>
                    <div class="name">send</div>
                    <div class="fontclass">#icon-send</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-share"></use>
                    </svg>
                    <div class="name">share</div>
                    <div class="fontclass">#icon-share</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-skype"></use>
                    </svg>
                    <div class="name">skype</div>
                    <div class="fontclass">#icon-skype</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-slack"></use>
                    </svg>
                    <div class="name">slack</div>
                    <div class="fontclass">#icon-slack</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-star-circle"></use>
                    </svg>
                    <div class="name">star-circle</div>
                    <div class="fontclass">#icon-star-circle</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-star"></use>
                    </svg>
                    <div class="name">star</div>
                    <div class="fontclass">#icon-star</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-star-outline"></use>
                    </svg>
                    <div class="name">star-outline</div>
                    <div class="fontclass">#icon-star-outline</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tag-multiple"></use>
                    </svg>
                    <div class="name">tag-multiple</div>
                    <div class="fontclass">#icon-tag-multiple</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-telegram"></use>
                    </svg>
                    <div class="name">telegram</div>
                    <div class="fontclass">#icon-telegram</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-thumb-up"></use>
                    </svg>
                    <div class="name">thumb-up</div>
                    <div class="fontclass">#icon-thumb-up</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-thumb-up-outline"></use>
                    </svg>
                    <div class="name">thumb-up-outline</div>
                    <div class="fontclass">#icon-thumb-up-outline</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-twitter"></use>
                    </svg>
                    <div class="name">twitter</div>
                    <div class="fontclass">#icon-twitter</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-vk"></use>
                    </svg>
                    <div class="name">vk</div>
                    <div class="fontclass">#icon-vk</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wechat"></use>
                    </svg>
                    <div class="name">wechat</div>
                    <div class="fontclass">#icon-wechat</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-youtube-play"></use>
                    </svg>
                    <div class="name">youtube-play</div>
                    <div class="fontclass">#icon-youtube-play</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-CN_baidu"></use>
                    </svg>
                    <div class="name">CN_baidu</div>
                    <div class="fontclass">#icon-CN_baidu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-CN_baidutieba"></use>
                    </svg>
                    <div class="name">CN_baidu tieba</div>
                    <div class="fontclass">#icon-CN_baidutieba</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-CN_bilibili"></use>
                    </svg>
                    <div class="name">CN_bilibili</div>
                    <div class="fontclass">#icon-CN_bilibili</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-CN_diandian"></use>
                    </svg>
                    <div class="name">CN_diandian</div>
                    <div class="fontclass">#icon-CN_diandian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-CN_doubanB"></use>
                    </svg>
                    <div class="name">CN_douban B</div>
                    <div class="fontclass">#icon-CN_doubanB</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-CN_jianshu"></use>
                    </svg>
                    <div class="name">CN_jianshu</div>
                    <div class="fontclass">#icon-CN_jianshu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-CN_renrenxiaozhan"></use>
                    </svg>
                    <div class="name">CN_renren xiaozhan</div>
                    <div class="fontclass">#icon-CN_renrenxiaozhan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-CN_renren"></use>
                    </svg>
                    <div class="name">CN_renren</div>
                    <div class="fontclass">#icon-CN_renren</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-CN_zhihu"></use>
                    </svg>
                    <div class="name">CN_zhihu</div>
                    <div class="fontclass">#icon-CN_zhihu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-imlogo"></use>
                    </svg>
                    <div class="name">TOPS-B</div>
                    <div class="fontclass">#icon-imlogo</div>
                </li>
            
        </ul>


        <h2 id="symbol-">symbol引用</h2>
        <hr>

        <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
        这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：</p>
        <ul>
          <li>支持多色图标了，不再受单色限制。</li>
          <li>通过一些技巧，支持像字体那样，通过<code>font-size</code>,<code>color</code>来调整样式。</li>
          <li>兼容性较差，支持 ie9+,及现代浏览器。</li>
          <li>浏览器渲染svg的性能一般，还不如png。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-symbol-">第一步：引入项目下面生成的symbol代码：</h3>
        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;</span></code></pre>
        <h3 id="-css-">第二步：加入通用css代码（引入一次就行）：</h3>
        <pre><code class="lang-js hljs javascript">&lt;style type=<span class="hljs-string">"text/css"</span>&gt;
.icon {
   width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
   vertical-align: <span class="hljs-number">-0.15</span>em;
   fill: currentColor;
   overflow: hidden;
}
&lt;<span class="hljs-regexp">/style&gt;</span></code></pre>
        <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-js hljs javascript">&lt;svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>&gt;<span class="xml"><span class="hljs-tag">
  &lt;<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
</span>&lt;<span class="hljs-regexp">/svg&gt;
        </span></code></pre>
    </div>
</body>
</html>
